<template>
  <div class="detail">
    <!-- 头部 -->
    <div class="head" v-for="item in titleList" :key="item.id">
      <h4>{{ item.title }}</h4>
      <p>
        <span>发表时间:{{ item.add_time | dateFormat }}</span
        ><span>点击:{{ item.click }}</span>
      </p>
      <hr />
      <ul>
        <li
          v-for="(item, index) in imgList"
          :key="item.id"
          @click="onChange(index)"
        >
          <img :src="item.src" />
          <van-image-preview
            v-model="show"
            :images="images"
            :start-position="num"
          >
            <template>{{ index }}/{{ total }}</template>
          </van-image-preview>
        </li>
      </ul>
      <div>{{ item.content }}</div>
    </div>
    <!-- 评论区 -->
    <h4>发表评论</h4>
    <hr />
    <div class="btn">
      <div class="fb">
        <textarea placeholder="请输入内容"></textarea>
      </div>
      <van-button type="info" size="large">发表评论</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      index: 0,
      num: 0,
      images: [],
      id: this.$route.params.id,
      imgList: [],
      titleList: [],
      total: 0
    }
  },
  created() {
    this.getImgList()
    this.getTitleList()
    // this.changImg()
  },
  methods: {
    async getImgList() {
      const res = await this.$http.get(`/api/getthumimages/${this.id}`)
      this.imgList = res.data.message

      for (let i in this.imgList) {
        this.images.push(this.imgList[i].src)
      }
      this.total = this.images.length
    },
    async getTitleList() {
      const res = await this.$http.get(`/api/getimageInfo/${this.id}
        `)
      this.titleList = res.data.message
    },
    onChange(e) {
      this.index = e - 0 + 1
      this.show = true
      this.num = e
    }
  }
}
</script>

<style lang="less" scoped>
.head {
  div {
    padding: 0 5px;
    color: #666;
  }
  //   background-color: #faa;
  h4 {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    display: block;
    height: 20px;
    color: rgb(38, 162, 255);
    margin: 50px 0 20px 0;
  }
}
ul {
  margin: 10px 0;
  padding: 0 5px;
  display: flex;
  flex-wrap: wrap;
  li {
    padding: 5px;
    width: 108px;
    img {
      width: 100%;
      box-shadow: rgba(0, 0, 0, 0.3) 1px 0px 8px 1px;
    }
  }
}
.btn {
  margin: 0 10px;
  .van-button {
    margin-top: 10px;
  }
}
.fb {
  height: 100px;
  border: 1px solid #666;
  textarea {
    padding: 0 10px;
    border: none;
  }
}
.detail {
  margin: 50px 0;
}
</style>
